<template>
  <el-dialog :title="dialogTitle" v-model="showDialog" draggable width="480px" append-to-body>
    <el-descriptions :column="2" border size="">
      <el-descriptions-item label="分区名称">
        <span>{{ targetData.areaName }}</span>
        <el-divider direction="vertical" />
        <span>{{ targetData.areaCode }}#</span>
      </el-descriptions-item>
      <el-descriptions-item label="分区类型">
        <span>{{ targetData.areaTypeName }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="原通行能力">
        <span>{{ targetData.originalCapacity }}&nbsp;架/时</span>
      </el-descriptions-item>
      <el-descriptions-item label="涉及模块">
        <span>{{ targetData.models.join('、') }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="影响移交点" :span="2">
        <span>{{ targetData.raletedGatePoints.join('、') }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="影响机场" :span="2">
        <span>{{ targetData.raletedAirports.join('、') }}</span>
      </el-descriptions-item>
    </el-descriptions>
    <el-divider />
    <el-form :model="targetData" label-width="120px">
      <el-form-item label="天气发生概率">
        <!-- <el-select v-model="targetData.weatherProbability" style="width:100%" placeholder="Select">
          <el-option v-for="item in weatherProbabilityList" :label="item.label" :value="item.value" />
        </el-select> -->
        <el-radio-group v-model="targetData.weatherProbability">
          <el-radio v-for="item in weatherProbabilityList" :label="item.value">{{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="天气覆盖面积">
        <!-- <el-select v-model="targetData.weatherCoverage" style="width:100%" placeholder="Select">
          <el-option v-for="item in weatherCoverageList" :label="item.label" :value="item.value" />
        </el-select> -->
        <el-radio-group v-model="targetData.weatherCoverage">
          <el-radio v-for="item in weatherCoverageList" :label="item.value">{{ item.label }} </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="天气强度/类型">
        <!-- <el-select v-model="targetData.weatherIntensity" style="width:100%" placeholder="Select">
          <el-option v-for="item in weatherIntensityList" :label="item.label" :value="item.value" />
        </el-select> -->
        <el-radio-group v-model="targetData.weatherIntensity">
          <el-radio v-for="item in weatherIntensityList" :label="item.value">{{ item.label }} </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-divider />
    <el-descriptions :column="2" border size="">
      <el-descriptions-item label="通行能力">
        <span>{{ currentCapacity }}&nbsp;架/时</span>
      </el-descriptions-item>
      <el-descriptions-item label="通行能力(%)">
        <span>{{ currentPercentage }}</span>
      </el-descriptions-item>
    </el-descriptions>
    <el-divider />
    <div style="text-align:center">
      <el-button type="primary" text @click="saveConfig">
        保存修改</el-button>
      <el-button type="info" text @click="closeDialog">取消</el-button>
    </div>

    <!-- <pre>{{ targetData }}</pre> -->
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
// import weatherOptions from "../statics/weatherOptions.json";
// import capacityLayout from "../statics/capacityLayout.json";
import useCapacityStore from "@/store/capacity";

const capacityStore = useCapacityStore();
const selectedRecord = computed(() => capacityStore.selectedRecord);

const weatherProbabilityList = ref();
const weatherCoverageList = ref();
const weatherIntensityList = ref();

let selectedRecordCopied = [];
const targetData = ref();
const showDialog = ref(false);
const dialogTitle = ref('');

let targetId = -1;
let targetIdx = -1;

const openConfig = ({ id, idx }) => {
  // check if editable
  if (!validStatus()) return null;
  // console.log('openConfig', { id, idx });
  targetId = id;
  targetIdx = idx;
  selectedRecordCopied = JSON.parse(JSON.stringify(selectedRecord.value));
  targetData.value = selectedRecordCopied.content[idx];
  dialogTitle.value = "气象分区“" + targetData.value.areaName + "”设置";
  // filter option for weather setting
  setWeatherOptions();
  // show dialog
  openDialog();
}
defineExpose({ openConfig });

const validStatus = () => {
  let status = capacityStore.selectedRecordStatus;
  // console.log('checkEditable', status);
  switch (status) {
    case -2:
      ElMessage.error('当前数据内容无效，无法编辑。');
      return false;
    case -1:
      ElMessage('当前数据已经过期，无法编辑。');
      return false;
    case 0:
      return true;
    case 1:
      ElMessage.warning('当前数据已经生效，无法编辑。');
      return false;
    case 2:
      ElMessage.warning('当前数据为默认设置，无法编辑。请先点击“+”图标添加一个时段再进行编辑。');
      return false;
    default:
      ElMessage.error('当前数据状态无效，无法编辑。');
      return false
  }
}

const setWeatherOptions = () => {
  weatherProbabilityList.value = capacityStore.weatherOptions.weatherProbability.filter(val => val.areaType == targetData.value.areaType);
  weatherCoverageList.value = capacityStore.weatherOptions.weatherCoverage.filter(val => val.areaType == targetData.value.areaType);
  weatherIntensityList.value = capacityStore.weatherOptions.weatherIntensity.filter(val => val.areaType == targetData.value.areaType);
}

const computeCapacityRatio = (t) => {
  let r = 1;
  for (let i = 0; i < capacityStore.capacityLayout.length; i++) {
    let l = capacityStore.capacityLayout[i];
    if (
      l.areaType == t.areaType &&
      l.weatherProbability == t.weatherProbability &&
      l.weatherCoverage == t.weatherCoverage &&
      l.weatherIntensity == t.weatherIntensity
    ) {
      r = l.capacityRatio;
    }
  }
  // console.log('computeCapacityRatio', r);
  return r;
}

const currentRatio = computed(() => computeCapacityRatio(targetData.value));
const currentPercentage = computed(() => (currentRatio.value * 100) + '%');
const currentCapacity = computed(() => Math.round(currentRatio.value * targetData.value.originalCapacity));

const emit = defineEmits(['saveConfig']);
const saveConfig = () => {
  targetData.value.capacityRatio = computeCapacityRatio(targetData.value);
  targetData.value.currentCapacity = Math.round(targetData.value.capacityRatio * targetData.value.originalCapacity);
  emit('saveConfig', { id: targetId, idx: targetIdx, data: targetData.value });
  closeDialog();
}

const openDialog = () => { showDialog.value = true; }
const closeDialog = () => { showDialog.value = false; }

/* ----------------------------------------------------------------

{
  "models": [
    "01",
    "08",
    "10"
  ],
  "areaCode": 1,
  "areaName": "1区",
  "areaType": 1,
  "airportCount": 1,
  "capacityRatio": 1,
  "currentCapacity": 67,
  "weatherCoverage": 0,
  "originalCapacity": 67,
  "weatherIntensity": 0,
  "raletedGatePoints": [],
  "weatherConditions": [],
  "weatherProbability": 0
}

---------------------------------------------------------------- */

</script>